<template>
    <!--template下只能有一个标签作为父标签，需要外层包div
    template要求:页面内不能存在script，需要全部删除脚本
    -->
    <div class="skin-1">
        <div id="navbar" class="navbar navbar-default ace-save-state">
            <div class="navbar-container ace-save-state" id="navbar-container">
                <button type="button" class="navbar-toggle menu-toggler pull-left"  data-target="#sidebar">
                    <span class="sr-only">Toggle sidebar</span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>
                </button>

                <div class="navbar-header pull-left">
                    <a href="index.html" class="navbar-brand">
                        <small>
                            <!--<img width="100px" src="/static/image/logo3.png" alt="logo"/>-->
                            &nbsp;<span class="header_title">站牛网CRM管理系统</span>
                            <span class="line-height-1 bigger-170 blue"></span>
                        </small>
                    </a>
                </div>

                <div class="navbar-buttons navbar-header pull-right" role="navigation">
                    <ul class="nav ace-nav">
                        <!--<li class="light-orange dropdown-modal">-->
                        <li class="dropdown-modal">
                            <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                                <i class="ace-icon fa fa-pencil-square-o icon-animated-wrench"></i>
                                <span class="badge badge-primary">帮助中心</span>
                            </a>

                            <!--<ul class="dropdown-menu-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close">
                                <li class="dropdown-header">
                                    <i class="ace-icon fa fa-check"></i>
                                    暂无内容
                                </li>

                                &lt;!&ndash;<li class="dropdown-content">
                                    <ul class="dropdown-menu dropdown-navbar">
                                        <li>
                                            <a href="#">
                                                <div class="clearfix">
                                                    <span class="pull-left">Software Update</span>
                                                    <span class="pull-right">65%</span>
                                                </div>

                                                <div class="progress progress-mini">
                                                    <div style="width:65%" class="progress-bar"></div>
                                                </div>
                                            </a>
                                        </li>

                                        <li>
                                            <a href="#">
                                                <div class="clearfix">
                                                    <span class="pull-left">Hardware Upgrade</span>
                                                    <span class="pull-right">35%</span>
                                                </div>

                                                <div class="progress progress-mini">
                                                    <div style="width:35%" class="progress-bar progress-bar-danger"></div>
                                                </div>
                                            </a>
                                        </li>

                                        <li>
                                            <a href="#">
                                                <div class="clearfix">
                                                    <span class="pull-left">Unit Testing</span>
                                                    <span class="pull-right">15%</span>
                                                </div>

                                                <div class="progress progress-mini">
                                                    <div style="width:15%" class="progress-bar progress-bar-warning"></div>
                                                </div>
                                            </a>
                                        </li>

                                        <li>
                                            <a href="#">
                                                <div class="clearfix">
                                                    <span class="pull-left">Bug Fixes</span>
                                                    <span class="pull-right">90%</span>
                                                </div>

                                                <div class="progress progress-mini progress-striped active">
                                                    <div style="width:90%" class="progress-bar progress-bar-success"></div>
                                                </div>
                                            </a>
                                        </li>
                                    </ul>
                                </li>

                                <li class="dropdown-footer">
                                    <a href="#">
                                        See tasks with details
                                        <i class="ace-icon fa fa-arrow-right"></i>
                                    </a>
                                </li>&ndash;&gt;
                            </ul>-->
                        </li>

                        <li class="dropdown-modal">
                            <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                                <i class="ace-icon fa fa-home icon-animated-bell"></i>
                                <!--badge-important-->
                                <span class="badge badge-primary">前台首页</span>
                            </a>

                            <!--<ul class="dropdown-menu-right dropdown-navbar navbar-pink dropdown-menu dropdown-caret dropdown-close">
                                <li class="dropdown-header">
                                    <i class="ace-icon fa fa-exclamation-triangle"></i>
                                    暂无消息
                                </li>

                                &lt;!&ndash;<li class="dropdown-content">
                                    <ul class="dropdown-menu dropdown-navbar navbar-pink">
                                        <li>
                                            <a href="#">
                                                <div class="clearfix">
													<span class="pull-left">
														<i class="btn btn-xs no-hover btn-pink fa fa-comment"></i>
														New Comments
													</span>
                                                    <span class="pull-right badge badge-info">+12</span>
                                                </div>
                                            </a>
                                        </li>

                                        <li>
                                            <a href="#">
                                                <i class="btn btn-xs btn-primary fa fa-user"></i>
                                                Bob just signed up as an editor ...
                                            </a>
                                        </li>

                                        <li>
                                            <a href="#">
                                                <div class="clearfix">
													<span class="pull-left">
														<i class="btn btn-xs no-hover btn-success fa fa-shopping-cart"></i>
														New Orders
													</span>
                                                    <span class="pull-right badge badge-success">+8</span>
                                                </div>
                                            </a>
                                        </li>

                                        <li>
                                            <a href="#">
                                                <div class="clearfix">
													<span class="pull-left">
														<i class="btn btn-xs no-hover btn-info fa fa-twitter"></i>
														Followers
													</span>
                                                    <span class="pull-right badge badge-info">+11</span>
                                                </div>
                                            </a>
                                        </li>
                                    </ul>
                                </li>

                                <li class="dropdown-footer">
                                    <a href="#">
                                        See all notifications
                                        <i class="ace-icon fa fa-arrow-right"></i>
                                    </a>
                                </li>&ndash;&gt;
                            </ul>-->

                        </li>

                        <li class="dropdown-modal">
                            <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                                <i class="ace-icon fa fa-comments icon-animated-vertical"></i>
                                <span class="badge badge-primary">联系我们</span>
                            </a>

                        </li>

                        <!--<li class="light-blue dropdown-modal">-->
                        <li class=" dropdown-modal">
                            <!--按钮和模态框-弹出层的事件绑定-->
                            <a data-toggle="dropdown" href="#" class="dropdown-toggle">
                                <!--修改图片定位-->
                                <!--<img class="nav-user-photo" src="/static/image/1_marknelson_anotherplace_t.jpg" alt="Jason's Photo" />-->
                                <span class="user-info">
									<small>欢迎</small>
									{{userLogin.nickName}}
								</span>

                                <i class="ace-icon fa fa-caret-down"></i>
                            </a>

                            <ul class="user-menu dropdown-menu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">

                                <li>
                                    <a @click="loginOut()">
                                        <i class="ace-icon fa fa-power-off"></i>
                                        退出登录
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div><!-- /.navbar-container -->
        </div>

        <div class="main-container ace-save-state " id="main-container">
            <div id="sidebar" class="sidebar                  responsive                    ace-save-state">

                <!--main左菜单-内容-->
                <ul class="nav nav-list ">
                    <!--增加sidebar - id -->
                    <li class="" id="welcome-sidebar">
                        <!--添加点击跳转：
                        <router-link to="" > = <a href="">
                        -->
                        <router-link to="/welcome">
                            <i class="menu-icon fa fa-tachometer"></i>
                            <span class="menu-text"> 欢迎: {{userLogin.nickName}} 进入系统 </span>
                        </router-link>

                        <b class="arrow"></b>
                    </li>

                    <!--启动展开的样式-->
                    <!--v-show="getUserResources('01')" -->
                    <li class="">
                        <a  href="#" class="dropdown-toggle">
                            <i class="menu-icon fa fa-list"></i>
                            <span class="menu-text"> 系统管理 </span>

                            <b class="arrow fa fa-angle-down"></b>
                        </a>

                        <b class="arrow"></b>

                        <ul class="submenu">
                            <!--v-show="getUserResources('0101')"-->
                            <li class="" id="system-user-sidebar">
                                <router-link to="/manager/system-admin">
                                    <i class="menu-icon fa fa-caret-right"></i>
                                    账号管理
                                </router-link>
                                <b class="arrow"></b>
                            </li>
                            <!-- v-show="getUserResources('0102')" -->
                            <li  class="" id="system-resources-sidebar">
                                <router-link to="/manager/system-message">
                                    <i class="menu-icon fa fa-caret-right"></i>
                                    资料设置
                                </router-link>

                                <b class="arrow"></b>
                            </li>
                            <!-- v-show="getUserResources('0103')" -->
                            <li  class="" id="system-single-info-sidebar">
                                <router-link to="/manager/system-single-info">
                                    <i class="menu-icon fa fa-caret-right"></i>
                                    独立信息管理
                                </router-link>

                                <b class="arrow"></b>
                            </li>
                            <!-- v-show="getUserResources('0104')" -->
                            <li class="" id="system-links-sidebar">
                                <router-link to="/manager/system-links">
                                    <i class="menu-icon fa fa-caret-right"></i>
                                    友情链接
                                </router-link>

                                <b class="arrow"></b>
                            </li>
                            <!-- v-show="getUserResources('0105')" -->
                            <li  class="" id="system-site-sidebar">
                                <router-link to="/manager/system-site">
                                    <i class="menu-icon fa fa-caret-right"></i>
                                    站点设置
                                </router-link>

                                <b class="arrow"></b>
                            </li>
                            <!-- v-show="getUserResources('0106')" -->
                            <li  class="" id="system-third-code-sidebar">
                                <router-link to="/manager/system-third-code">
                                    <i class="menu-icon fa fa-caret-right"></i>
                                    第三方代码
                                </router-link>

                                <b class="arrow"></b>
                            </li>
                        </ul>
                    </li>

                    <!--启动展开的样式-->
                    <!-- v-show="getUserResources('02')" -->
                    <li class="">
                        <a href="#" class="dropdown-toggle">
                            <i class="menu-icon fa fa-list"></i>
                            <span class="menu-text"> 栏目管理 </span>

                            <b class="arrow fa fa-angle-down"></b>
                        </a>

                        <b class="arrow"></b>

                        <ul class="submenu">
                            <!--id与路由匹配：路由=business/chapter-->
                            <!--v-show="getUserResources('0201')"-->
                            <li class="" id="business-category-sidebar">
                                <router-link to="/business/module-category">
                                    <i class="menu-icon fa fa-caret-right"></i>
                                    栏目分类
                                </router-link>

                                <b class="arrow"></b>
                            </li>
                            <!-- v-show="getUserResources('0202')" -->
                            <li class="" id="business-back-module-sidebar">
                                <router-link to="/business/back-module">
                                    <i class="menu-icon fa fa-caret-right"></i>
                                    栏目设置
                                </router-link>

                                <b class="arrow"></b>
                            </li>


                            <!--                            <li class="active" id="business-chapter-sidebar">-->
                            <!--                                <router-link to="/business/chapter">-->
                            <!--                                    <i class="menu-icon fa fa-caret-right"></i>-->
                            <!--                                    章节管理-->
                            <!--                                </router-link>-->

                            <!--                                <b class="arrow"></b>-->
                            <!--                            </li>-->
                            <!--                            <li class="active" id="business-section-sidebar">-->
                            <!--                                <router-link to="/business/section">-->
                            <!--                                    <i class="menu-icon fa fa-caret-right"></i>-->
                            <!--                                    小节管理-->
                            <!--                                </router-link>-->

                            <!--                                <b class="arrow"></b>-->
                            <!--                            </li>-->

                        </ul>
                    </li>

                    <!--file模块下file功能管理-->
                    <!-- v-show="getUserResources('03')" -->
                    <li class="" >
                        <a href="#" class="dropdown-toggle">
                            <i class="menu-icon fa fa-list"></i>
                            <span class="menu-text">信息管理</span>
                            <b class="arrow fa fa-angle-down"></b>
                        </a>
                        <b class="arrow"></b>

                        <ul class="submenu">
                            <!-- v-show="getUserResources('0205')" -->
                            <li class="" id="business-module-info-sidebar">
                                <router-link to="/business/module-info">
                                    <i class="menu-icon fa fa-caret-right"></i>
                                    栏目信息设置
                                </router-link>

                                <b class="arrow"></b>
                            </li>
                            <!-- v-show="getUserResources('0302')" -->
                            <li  class="" id="system-article-content-sidebar">
                                <router-link to="/business/article-content">
                                    <i class="menu-icon fa fa-caret-right"></i>
                                    发布新文章
                                </router-link>

                                <b class="arrow"></b>
                            </li>
                            <!-- v-show="getUserResources('0303')" -->
                            <li  class="" id="system-product-content-sidebar">
                                <router-link to="/business/product-content">
                                    <i class="menu-icon fa fa-caret-right"></i>
                                    发布新产品
                                </router-link>

                                <b class="arrow"></b>
                            </li>

                        </ul>

                    </li><!--文件管理-->

                </ul><!-- /.nav-list -->

                <!--main做菜单-下标签-->
                <div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
                    <i id="sidebar-toggle-icon" class="ace-icon fa fa-angle-double-left ace-save-state" data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i>
                </div>
            </div>

            <div class="main-content">
                <div class="main-content-inner">
                    <!--删除面包屑导航-->
                    <div class="page-content">
                        <!--删除settings-->
                        <div class="row">
                            <div class="col-xs-12">
                                <!-- PAGE CONTENT BEGINS -->
                                <router-view></router-view>
                                <!-- PAGE CONTENT ENDS -->
                            </div><!-- /.col -->
                        </div><!-- /.row -->

                    </div><!-- /.page-content -->

                </div>
                <div class="footer">
                    <div class="footer-inner">
                        <div class="footer-fixed">
						<span class="bigger-120">
							<span class="blue bolder">站牛网</span>
							CRM后台管理系统 &copy; 2020 cevent技术支持
						</span>

                            &nbsp; &nbsp;
                            <span class="action-buttons">
							<a href="#">
								<img class="ace-icon  light-red bigger-150" />
							</a>
						</span>
                        </div>
                    </div>
                </div>
                <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
                    <i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
                    <img class="line-height-normal width-auto" src="/static/image/logo3.png" alt="logo"/>
                </a>
            </div><!-- /.main-content -->

        </div>
        <!-- /.main-container -->
    </div>
</template>

<script>

    //添加组件:单引号和双引号都支持
    export default {
        name:"admin",
        data:function(){
            return{
                userLogin:{},
            }
        },
        mounted:function () {
            //将this变为本地变量_this，js中有this关键字，代表当前执行方法的对象。
            let _this=this;
            //移除之前login携带的class参数
            $("body").removeClass("login-layout blur-login");
            $("body").attr("class","no-skin");
            console.log("admin");
            _this.activeSidebar(_this.$route.name.replace("/","-")+"-sidebar");
            //解决登录跳转admin侧边栏失效：初始化时，重新加载ace-js，每次进入admin都会调用该js完成页面跳转
            $.getScript('/ace/assets/js/ace.min.js');
            //取出login保存的session
            //_this.userLogin=SessionStorage.get("USER");
            _this.userLogin=Tool.getUserLogin();

            //路由拦截判断
            /*if(!_this.getUserResourcesRouter(_this.$route.name)){
                _this.$router.push("/login");
            }*/

        },
        //监控明页面跳转：只对admin下的子路由监听，login/其他页面的跳转不会被监听到
        watch:{
            /*$route:{
                handler:function (newVal,oldVal) {
                    console.log("页面跳转：newVal==> "+newVal+"  oldVal===> "+oldVal);
                    let _this=this;

                    //路由拦截判断
                    if(!_this.getUserResourcesRouter(newVal.name)){
                        _this.$router.push("/login");
                        return;
                    }

                    //页面加载完成后执行
                    _this.$nextTick(function () {
                        //将路径拼接为class,通过router-path定义的name属性，获取id，规则：id=路由
                        _this.activeSidebar(_this.$route.name.replace("/","-")+"-sidebar");
                    })
                }
            }*/
        },
        methods:{

            login(){
                this.$router.push("/admin")
            },
            //查找用户权限
            /*getUserResources(id){
                return Tool.getUserResources(id);
            },*/
            //路由判断
           /* getUserResourcesRouter(router){
                let _this=this;
                let resources=Tool.getUserLogin().userResources;
                console.log(resources);
                if(Tool.isEmpty(resources)){
                    return false;
                }
                for(let i=0;i<resources.length;i++){
                    if(router===resources[i].page){
                        return true;
                    }
                }
                return false;
            },*/
            /**
             * 菜单激活样式：id是当前点击的菜单id
             * siblings：jQuery用法，获取兄弟节点
             */
            //二级菜单
            activeSidebar:function (id) {
                //兄弟菜单去掉active样式，自身增加active样式
                $("#"+id).siblings().removeClass("active");
                $("#"+id).siblings().find("li").removeClass("active");
                $("#"+id).addClass("active");

                //一级菜单：如果有父菜单，父菜单的兄弟菜单去掉 open active，父菜单增加open active
                let parentLi=$("#"+id).parents("li");
                if(parentLi){
                    //去除父菜单及兄弟菜单的样式
                    parentLi.siblings().removeClass("open active");
                    //父菜单及兄弟菜单下的子菜单的样式去除
                    parentLi.siblings().find("li").removeClass("active");
                    parentLi.addClass("open active")
                }
            },
            /**
             * 登录
             */
            loginOut(){
                let _this=this;
                Loading.show();
                //_this.$ajax.get(process.env.VUE_APP_SERVER + '/system/admin/user/login-out')
                //改为redis登出方法
                _this.$ajax.get(process.env.VUE_APP_SERVER + '/system/admin/user/redis-login-out/'+_this.userLogin.imageCodeToken)
                    .then((responseLoginOut)=>{
                        Loading.hide();
                        let response=responseLoginOut.data;
                        if(response.success){
                            //最简单的方法，清楚sesstion缓存
                            Tool.setUserLogin(null);
                            _this.$router.push("/login");
                        }else{
                            Toast.warning(response.responseMsg);
                        }
                    });
            }
        }
    }

</script>
<style scoped>
    .navbar-toggle {
        background-color: #4D9DCC
    }

    .navbar-toggle:focus {
        background-color: #4D9DCC;
        border-color: transparent
    }

    .navbar-toggle:hover {
        background-color: #3992c6;
        border-color: rgba(255, 255, 255, .1)
    }

    .navbar .navbar-toggle.display, .navbar .navbar-toggle[data-toggle=collapse]:not(.collapsed) {
        background-color: #3384b3;
        box-shadow: inset 1px 1px 2px 0 rgba(0, 0, 0, .25);
        border-color: rgba(255, 255, 255, .35)
    }

    .header_title{
        font-size: 23px;
        text-align: center;
        margin-left: auto;
    }
    .main-content{
        background-color: white;
    }
    .main-container{
        background-color: #222a2d;
    }
</style>
